<template>
	<view>
		<view style="width:100%;height:auto;position:relative;">
		<!-- 	<view class="search-input">
				<icon type="search" size="15" style="padding-top:15rpx"/>
				<input class="search" @confirm="searchData" type="text" v-model="dname" confirm-type="search" placeholder="请输入商品或店铺名" />
				<icon type="clear" size="15" @click="clearSearch" style="padding-top:15rpx;flex:1;text-align: right;"/>
			</view> -->
			
			<!-- #ifdef MP-WEIXIN -->
				<view class="orderwarp" style="top:0upx">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
				<view class="orderwarp" style="top:160upx">
			<!-- #endif -->
				<u-navbar
					v-if="isChoose"
				    leftText="店铺"
				    :title="rname"
				    :safeAreaInsetTop="false"
					@leftClick="getShopIfo"
				>
				    <view
				        class="u-nav-slot"
				        slot="left"
				    >
				        <u-icon
				            name="list"
				            size="19"
				        ></u-icon>
				    </view>			
				</u-navbar>
				<view v-else style="width:100%;text-align: center;font-size:1rem;font-weight: bold;margin-top:20upx">{{rname}}</view>
				<u-tabs :scrollable="false" :current="active" :list="orderTabs" @click="onChange"></u-tabs>
			</view>
			<view style="margin-top:160rpx;">
				<view v-if="nodata">
					<u-empty
						mode="order"
						:icon="no_data"
					>
					</u-empty>
				</view>
				<view v-else class="cont">
					<block v-for="(item,index) in goodsData" :v-key="index">
						<view style="background-color:#ffffff;margin-top:20rpx;padding:20rpx">
							<view style="display: flex;justify-content: space-between;padding-top:10rpx">
								<view>
									<view v-if="item.ostate=='3'">已退款</view>
									<view v-if="item.ostate=='1'">已支付</view>
									<view v-if="item.ostate=='2'">已完成</view>
									<view v-if="item.ostate=='0'">待支付</view>
								</view>
								<view >总计：<span style="font-size:1rem;font-weight: bold;">￥{{item.paymoney}}</span></view>
							</view>
							<view v-for="child in item.disheorderOrderitems">
								<view @click="goDetail(item,child)">
									<view style="display:flex;margin-top:20upx">
										<image v-if="child.dimg" mode="aspectFill" style="width:200upx;height:200upx;border-radius: 20rpx;"  :src="uploadFilePath+child.dimg"></image>
										<image v-else mode="aspectFill" style="width:200upx;height:200upx;"  :src="default_img"></image>
										<view style="width:68%;margin-left:20upx">
											<view style="font-size:1rem;font-weight: bold;">{{child.dishesName}}</view>
											<view style="font-size:1rem;">￥{{child.ipayNum}} <span>/{{child.buyNum}}件</span></view>
											<view style="display:flex;justify-content: space-between;">
												<view style="font-size:1rem" v-if="item.qcode">取餐码：<text>{{item.qcode}}</text></view>
											</view>
											<view style="font-size:1rem;color:#666">{{item.createTime}}</view>
											<view>备注：{{child.memo}}</view>
										</view>
									</view>
								</view>
								<view style="display:flex;margin:10px 0px;padding-bottom:10px">
									<u-button :plain="true" type="success" :hairline="true" text="回复" size="small" style="width:30%" @click="goEvaluate(child)"></u-button>
								</view>
							</view>
							<u-button v-if="item.ostate=='2'" :plain="true" :hairline="true" size="small" style="width:30%" text="退款" @click="goBackOrd(item)"></u-button>
						</view>				
					</block>
				</view>
			</view>
		</view>
		 <u-picker ref="uPicker" :show="rantCate" :columns="columns"  title="餐厅" @cancel="onClose1"  @confirm="confirm"></u-picker>
		<u-modal :show="show" :title="title" :content='content'></u-modal>
		<u-modal :show="showtd" :title="tdtitle" :content="tdcontent" showConfirmButton showCancelButton :zoom="false" @confirm="submitTuidan" @cancel="closeTdModel"></u-modal>
	</view>
</template>

<script>
	import Config from '@/util/index.js'
	import {
		orderShopList
	} from '@/api/cart'
	import {
		getShopIfoBytel
	} from '@/api/goods'
	import {
		orderRefund,waitGoReply
	} from '@/api/order'
	
	export default {
		data() {
		    return {
				active:0,
				isChoose:true,
			    time: 30 * 60 * 60 * 1000,
			    tdtag:1,
				shopshow:false,
				tdtitle:"退单提醒",
				tdcontent:"你确定要退单吗?不再考虑一下?",
			    moreData:false,
			    nodata:false,
				showtd:false,
			    goodsData:[],
			    pageNum:0,
			    pageSize:10,
			    total:0,
				orderTabs:[
					{
						name: '全部',
					},
					{
						name: '待回复'
					},
					{
						name: '售后订单'
					}
				],
				rname:'',
				shopIfo:[],
				columns:[[]],
			    showkw:false,
			    memo:'',
				scode:'',
				rcode:'',
				tdorderid:'',
				userId:'',
				shopId:'',
			    state:"",
				dclogo:'',
				goods:'',
				no_data:'',
			    tdorder:'',
			    tdstate:'',
			    uploadFilePath:'',
				show:false,
				rantCate:false,
				userName:'',
				default_img:'',
				title:'确认退单',
				content:'你确定要退单吗，不再考虑一下？'
		    }
		},
		filters:{
			OState(type){
				switch(parseInt(type)){
					 case 0:
					  return "已下单"
					  break;
					case 1:
					  return "已接单"
					  break;
					case 2:
					  return "已完成"
					  break;
					case 3:
					  return "已退单"
					  break;
					default:
					  return ""
				}
			}
		},
	   /**
	   * 生命周期函数--监听页面加载
	   */
	    onLoad(options) {
			this.no_data = this.picUrl + "no_data.jpg"
			this.default_img = this.picUrl + "goods.png"
	    },
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
		  this.queryOrderBystate()
		},
		created(){
			let _this = this
			uni.getStorage({
				key: 'userifo',
				success: function (res) {
					let depts = JSON.parse(res.data)
					_this.userName = depts.userName
					console.log("_this.userName",_this.userName)
					_this.getShopIfo()
				}
			})
			this.dclogo = this.picUrl + "dclogo.png"
			this.goods = this.picUrl + "goods.png"
			this.no_data = this.picUrl + "no_data.jpg"
			this.default_img = this.picUrl + "goods.png"
			this.uploadFilePath = Config.get('apiUrl')
		},
		methods:{
			closepop(){
				this.shopshow = false
			},
			onClose1(){
			    this.rantCate=false
			},
			goBackOrd(row){
				this.orderId = row.orderId
				this.showtd = true
			},
			confirm(e) {
				this.rname = e.value[0]
				this.shopId = this.shopIfo.filter(val=>{
					return val.shopName == e.value[0]
				})[0].shopId
				this.goodsData=[]
				this.pageNum=0
				this.moreData=false
				this.nodata=false
				this.queryOrderBystate();
				this.rantCate = false
				this.isChoose = true
			},
			submitTuidan(){
				let params = {
					orderNumber:this.orderId
				}
				orderRefund(params).catch(res => {
					if(res.data.code==200){
						this.goodsData=[]
						this.pageNum=0
						this.moreData=false
						this.nodata=false
						this.showtd = false
						this.queryOrderBystate()
					}
				})
			},
			checkOrder(shpid){
				this.shopId = shpid
				this.state=""
				this.goodsData=[]
				this.pageNum=0
				this.moreData=false
				this.nodata=false
				this.queryOrderBystate()
			},
			getShopIfo(){
				this.columns = [[]]
				let params = {
					userName:this.userName
				}
				getShopIfoBytel(params).catch(res => {
					this.shopIfo = res.data.rows
					if(this.shopIfo.length>1){
						res.data.rows.forEach(its=>{
							this.columns[0].push(its.shopName)
						})
						this.rantCate = true
					}else{
						this.isChoose = false
						this.rname = this.shopIfo[0].shopName
						this.shopId = this.shopIfo[0].shopId
						this.pageNum=0
						this.goodsData=[]
						this.moreData=false
						this.nodata=false
						this.queryOrderBystate()
					}
				})
			},
			closeTdModel(){
				this.showtd = false
				uni.showToast({
					title:"已取消",
					icon: 'none',
					duration: 2000
				});
			},
			goEvaluate(row){
				let params = JSON.stringify(row)
				console.log("params",params)
				uni.navigateTo({
					url:`order/reply?parsData=${params}`
				})
			},
			goDetailDc(row){
				let params = JSON.stringify(row)
				uni.redirectTo({
					url:`../../goods/detail?gid=${row.dishesId}`
				})
			},
			goDetail(pda,cda){
				let obj = {
					shopName:pda.restUserShop.shopName,
					dimg:cda.dimg,
					ostate:pda.ostate,
					paymoney:pda.paymoney,
					state:'支付成功',
					createTime:pda.createTime,
					dishesName:cda.dishesName,
					company:'启真餐饮',
					payway:pda.payType,
					payorder:pda.payNo,
					orderId:pda.orderId
				}
				let params = JSON.stringify(obj)
				uni.setStorageSync('tabActive', this.active);
				uni.navigateTo({
					url:`detail?parsData=${params}`
				})
			},
			searchData(){
				this.goodsData = []
				this.pageNum = 0
				this.queryOrderBystate(this.dname,this.pagenum,this.pagesize);
			},
			onOpen(){},
			getGoodsDetail(orderId,orderstate){
			    let params = {
			      oid:orderId
			    }
			    let _this = this
			    Api.queryGoodsDetail(params).then(res=> {
			      if(res.retCode == 0){
			        if(res.orderinfo.state == "5"){
			          uni.showToast({
			            title:"商家已做好，不能退单",
			            icon: 'none',
			            duration: 2000
			          });
			        }else{
						_this.tdorderid = orderId
						_this.tdstate = orderstate
			           _this.onTuidan()
			        }
			      }
			    })
			  },
			  onClose(){
			    this.showkw=false
			  },
			  queryOrderBystate(){
			    // this.pagenum=-1
			    if(this.moreData){
			      return false
			    }else{
			      this.pageNum++
			    }
			    uni.showLoading({
			      title: '加载中...',
			    })
			    let userId = uni.getStorageSync('userId')
			    let params = {
			      shopId:this.shopId,
			      pageNum:this.pageNum,
			      pageSize:this.pageSize
			    }
			    let _this = this
			    orderShopList(params).catch(res=>{
					_this.shopshow = false
			      if(res.data.rows.length > 0){
			        const newList = res.data.rows
					if(this.state==2){
						let arr = []
						res.data.rows.forEach(item=>{
							if(item.disheorderOrderitems){
								item.disheorderOrderitems.forEach(itm=>{
									if(itm.disheorderDisheScore){
										arr.push(item)
									}
								})
							}
						})
						const total = res.data.total
						if(arr.length < total){
						  _this.goodsData=[..._this.goodsData,...arr]
						}else{
						  _this.moreData=true
						}
					}else{
						const total = res.data.total
						if(_this.goodsData.length < total){
						  _this.goodsData=[..._this.goodsData,...newList]
						}else{
						  _this.moreData=true
						}
					}
			      }else{
			        if(_this.pageNum==1){
			          _this.nodata=true
			         }
			         _this.moreData=true
			      }
			      uni.hideLoading()
			    })
			  },
			  onChangeMemo(val){
			    this.memo =val
			  },
			  seeWaitReply(){
				  // this.pagenum=-1
				  if(this.moreData){
				    return false
				  }else{
				    this.pageNum++
				  }
				  uni.showLoading({
				    title: '加载中...',
				  })
				  let userId = uni.getStorageSync('userId')
				  let params = {
				    shopId:this.shopId,
				    pageNum:this.pageNum,
				    pageSize:this.pageSize
				  }
				  let _this = this
				  waitGoReply(params).catch(res=>{
					  if(res.data.rows.length > 0){
					  	const newList = res.data.rows
					  	_this.total = parseInt(res.data.total)
					  	if(_this.goodsData.length < _this.total){
					  		_this.goodsData = [..._this.goodsData, ...newList]
					  	}else{
					  	  _this.moreData = true
					  	}
					  }else{
					  	if(pnum==1){
					  	  _this.noData = true
					  	}
					  	_this.moreData = true
					  	uni.showToast({
					  	  title:"暂无数据",
					  	  icon: 'none',
					  	  duration: 2000
					  	});
					  }
				    uni.hideLoading()
				  })
			  },
			  onChange(event) {
				if(event){
					this.active = event.index
				}
				this.goodsData=[]
				this.pageNum=0
				this.moreData=false
				this.nodata=false
				this.showkw=false
			    if(this.active==0){
			      this.state=""
			      this.queryOrderBystate()
			    }else if(this.active==1){
					this.state=2
			        this.seeWaitReply()
			      // this.waitOrder()
			    }else if(this.active==2){
			      this.state=3
			      this.queryOrderBystate()
			    }else{
			      // this.queryBackorder()
			    }
			}
		}
	}
</script>
	
<style>
	.cont{background-color: #F5F5F5;}
	.hjsf{display:flex;border-top:1px solid #F5F5F5;border-bottom:1px solid #F5F5F5;padding:10rpx auto}
	.gsorder{flex:2;}
	.search-input {
	  color: #999;
	  padding: 20rpx;
	  background: #f1f1f2;
	  display: flex;
	}
	 .search-input .search-icon {
	    margin-right: 8rpx;
	  }
	.gsorder image{width:5rem;height:5rem;object-fit:cover}
	.qrqc{display:flex;justify-items: center;align-items: center;}
	.qcbtn{width:100rpx!important;height:40rpx!important;}
	.item{color:#F66B71;font-size:1.2rem}
	.orderstate{color:#F66B71;}
	.orderwarp{width:100%;height:auto;position:fixed;z-index:999;background-color:#fff;border-bottom:10upx solid #EEEEF4}
</style>
